<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 交集选择器 */
        div.box{       /** div标签的那个类名为box的元素 */
            color: skyblue;
            font-size: 3rem;
        }
        /* 后代选择器 */
        .hou p {
            font-size: 2rem;
        }
        /* 子代选择器 */
        .zidai > span {
            color:blueviolet;
            font-size: 30px;
        }
        /* 并集选择器 */
        .bing > .box1, .bing > .box2 {
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        这是
        <p class="boxP">这是boxP</p>
    </div>
    <p class="box">css</p>
    <div class="hou">
        <p>1</p>
        <p>1</p>
        <p>1</p>
    </div>
    <div class="zidai">
        <div>这是交集选择器
            <p>
                <span>么么哒</span>
            </p>
            <span>哈哈哈</span>
        </div>
        <span>丫丫丫</span>
    </div>
    <div class="bing">
        <div class="box1">2</div>
        <div class="box2">3</div>
    </div>
    <script>
        /**
         * 0、行内1000
         * 1、标签选择器(伪元素::before) 1
         * 2、类选择器(伪类选择器:hove)(属性选择器) 10
         * 3、id选择器 100
         * 4、通配符选择器* 0
        */
       /**
        * 1、交集选择器 是一个即...又的关系 即是这个标签，同时这个标签调用了类(id)选择器
        * 2、后代选择器 
        *       嵌套关系
        *     特点：1. 父元素在前，子元素在后
        *           2. 后代选择器可以无限制的隔代
        *           3. 只要能代表父元素，子元素，后代选择器可以是任意选择器的组合
        * 3、子代选择器
        *       选择的是亲儿子，对孙子重孙子无效
        * 4、并集选择器
        *       将选择器样式全部相同或者部分相同的样式提取出来，通过逗号连在一起，做一个集体声明*
        * 5、伪类选择器
        *       :hover 悬浮时的状态
        *       :active 超链接激活状态
        *       :visited 超链接访问之后的状态
       */
    </script>
</body>
</html>